<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaff00;
				background-image: url(img/蜡笔小新.png);
				background-size: 30% 30%;
				background-repeat: no-repeat;
				/* 背景定位 */
				background-position: 200% 50%;
				background-position: center center;
			}
			body{
				/* 水印：1.加高度【滚动条】 */
				height: 1000000px;
				/* 3.启动背景图模式：等比例缩放模式 */
				background-size: cover;
				/* 2.背景图 */
				background-image: url(img/蜡笔小新.png);
				/* 4.设置滚动模式 */
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		<!-- 背景属性：页面上可以任意调整位置或改变图片的效果
		     ①background-color背景颜色【可以省略】
			 ②background-image【指定背景图】 url()| url("")|url('')
			 ③background-size背景尺寸  属性值 两种 ①px 绝对  %范围值
			                                     ②函数模式  1.contain 等比例缩放图片
												                 保证图片完全显示页面中
												           2.cover   等比例放大
														    覆盖整个容器
			 ④【前提：背景图小于空间】background-repeat背景重复
			 ⑤【前提：背景图小于空间】background-position背景属性：给背景图定位
			                                            属性值：x% y%
														        数值px  数值px
																英文
			 ⑥背景固定属性：background-attachment[用法：搭配background-size函数]
			 做背景图水印效果，步骤1：高度滚动条
			                     2：背景图存入body中
								 3：背景图前启动模式  contain  cover
								 4：启动背景固定属性 fixed
		 -->
		 <div></div>
		 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda maxime possimus minus commodi voluptatem, est vero nihil suscipit. Fuga ad id ipsam distinctio cum natus eveniet ab iure voluptatum a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae asperiores consequuntur odio aut nihil, a unde dolor sapiente facere nesciunt dolorum nobis id enim rerum, quos voluptatem quibusdam, fugit <magnam class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis vero suscipit, amet fugiat saepe dicta architecto asperiores quibusdam harum fugit veniam quod! Quos reiciendis et harum perspiciatis neque debitis explicabo?Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laboriosam voluptatem magnam, eligendi, porro adipisci facere neque ducimus voluptatibus harum quisquam delectus deserunt suscipit assumenda laborum aperiam veritatis culpa necessitatibus.</magnam>
	</body>
</html>